<template>
    <div class="bg-gray-100" v-loading="loading">
        <div class="container mx-auto px-4 py-8">
            <div class="flex flex-wrap -mx-4">
                <!-- Product Images -->
                <div class="w-full md:w-1/2 px-4 mb-8">
                    <video :src="detailData?.videoUrl" controls :poster="detailData?.discover"></video>
                    <div class="py-4 overflow-x-auto w-full whitespace-nowrap">
                        <el-image v-for="(src, index) in detailData?.picList" :key="src" :src="src"
                            style="width: 80px;height: 80px;" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" class='mr-2'
                            :initial-index="index" fit="cover" :preview-src-list="detailData?.picList" />
                    </div>
                </div>
                <div class="w-full md:w-1/2 px-4">
                    <h2 class="text-3xl font-bold mb-2">{{ detailData?.title }}</h2>
                    <p class="text-gray-600 mb-4 flex items-center gap-2">类别: <el-tag type="danger" effect="plain">
                            {{ detailData?.type }}
                        </el-tag></p>
                    <div class="mb-4">
                        <span class="text-lg font-bold mr-2 text-red-500">￥<span class="text-2xl">{{ detailData?.price
                        }}</span></span>
                        <span class="text-gray-500 line-through">￥{{ detailData?.oldPrice }}</span>
                    </div>
                    <p class="text-gray-700 mb-6">{{ detailData?.description }}</p>
                    <div class="mb-6">
                        <h3 class="text-lg font-semibold mb-2">使用技术栈: {{ detailData?.useTechnology }}</h3>
                    </div>
                    <div class="mb-6">
                        <label for="quantity" class="block text-sm font-medium text-gray-700 mb-1">数量：
                            <el-tag type='info' effect="plain">
                                1
                            </el-tag>
                        </label>
                    </div>
                    <div class="flex space-x-4 mb-6">
                        <cartAndPayBtn :isDetail="true" />
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold mb-2">提示:</h3>
                        <ul class="list-disc list-inside text-gray-700">
                            <li>成为会员免费下载</li>
                            <li>会员享有售后服务</li>
                            <li>虚拟物品，购买后不支持退款</li>
                            <li>有疑问请联系作者</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import cartAndPayBtn from '@/components/front/payment/cartAndPayBtn.vue';
import { http } from '@/axios';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const id = route.params?.id;
const detailData = ref<TProjectDetail | null>(null);
const loading = ref(false);
const handleDataDetail = async () => {
    // 根据id获取商品详情
    loading.value = true;
    const { code, data } = await http.request<TProjectDetail>({
        url: `project/${id}`,
        method: 'GET'
    });

    if (code == 0) {
        detailData.value = data;
        loading.value = false;
    }
}

handleDataDetail();
</script>

<style scoped></style>